<template>
  <el-dialog title="设置本赛事检录人员" class="gl_dialog_TitleLine" :visible.sync="dialogVisible" :before-close="close" width="660px">
    <div class="gl_mb_15">
      <span class="gl_pr_15">手机号/姓名：</span>
      <el-input v-model="Api_GET_EventsManagementClerkOfCourseClerkOfCourseDepositoryListQO.NameOrMobile" style="width:60%" placeholder="请输入手机号/姓名" size="mini" clearable @change="getData()" />
    </div>
    <el-table ref="checkTable" v-loading="loading" :data="peopleData" size="mini" @selection-change="selectionChange">
      <el-table-column type="selection" />
      <el-table-column prop="mobile" label="手机名" />
      <el-table-column prop="name" label="姓名" />
    </el-table>
    <el-row class="gl_pt_20" style="text-align: center;">
      <el-pagination
        :current-page="Api_GET_EventsManagementClerkOfCourseClerkOfCourseDepositoryListQO.Page"
        :page-size="Api_GET_EventsManagementClerkOfCourseClerkOfCourseDepositoryListQO.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini" @click="save()">保 存</el-button>
      <el-button size="mini" @click="close()">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapState } from 'vuex';
import {
  api_GET_EventsManagementClerkOfCourseClerkOfCourseDepositoryList, // 获取当前赛事未添加的检录库人员
  api_POST_EventsManagementClerkOfCourseCompetitionClerkOfCourse // 批量添加赛事检录人员
} from '@/extend/api/gameswaggerApi/app.js';
import {
  Api_GET_EventsManagementClerkOfCourseClerkOfCourseDepositoryListQO,
  SiSTKWEventsManagementUpdateCompetitionClerkOfCourseInput
} from '@/lib/form/game/swaggerForm';
export default {
  name: 'SelectPeople',
  data() {
    return {
      dialogVisible: false,
      loading: false,
      totalPage: 0,
      Filter: '',
      organizationId: '',
      Api_GET_EventsManagementClerkOfCourseClerkOfCourseDepositoryListQO: new Api_GET_EventsManagementClerkOfCourseClerkOfCourseDepositoryListQO(),
      SiSTKWEventsManagementUpdateCompetitionClerkOfCourseInput: new SiSTKWEventsManagementUpdateCompetitionClerkOfCourseInput(),
      peopleData: [], // 表格数据
      selection: [] // 选中的数据
    };
  },
  computed: {
    ...mapState({
      currentUserType: state => state.user.currentUserType,
      DelegationId: state => state.user.rootDelegationId
    })
  },
  watch: {
    'currentUserType': {
      immediate: true,
      deep: true,
      handler(val) {
        if (val && val.organizationUnitId) {
          this.organizationId = val.organizationUnitId;
        }
      }
    }
  },
  methods: {
    open() {
      this.dialogVisible = true;
      if (this.organizationId) {
        this.getData();
      }
    },
    close() {
      this.dialogVisible = false;
      this.Api_GET_EventsManagementClerkOfCourseClerkOfCourseDepositoryListQO.NameOrMobile = '';
    },
    // 获取当前赛事未添加的检录库人员
    getData(page) {
      var that = this;
      that.loading = true;
      that.Api_GET_EventsManagementClerkOfCourseClerkOfCourseDepositoryListQO.Page = page || 1;
      that.Api_GET_EventsManagementClerkOfCourseClerkOfCourseDepositoryListQO.SkipCount = (that.Api_GET_EventsManagementClerkOfCourseClerkOfCourseDepositoryListQO.Page - 1) * that.Api_GET_EventsManagementClerkOfCourseClerkOfCourseDepositoryListQO.MaxResultCount;
      that.Api_GET_EventsManagementClerkOfCourseClerkOfCourseDepositoryListQO.CompetitionId = this.$route.params.id;
      that.Api_GET_EventsManagementClerkOfCourseClerkOfCourseDepositoryListQO.OrganizationId = this.organizationId;
      api_GET_EventsManagementClerkOfCourseClerkOfCourseDepositoryList(that.Api_GET_EventsManagementClerkOfCourseClerkOfCourseDepositoryListQO).then(res => {
        that.peopleData = res.items;
        that.totalPage = res.totalCount;
        that.loading = false;
      }).catch(() => {
        that.loading = false;
      });
    },
    // 多选
    selectionChange(val) {
      const id = val.map(item => {
        return item.id;
      });
      this.selection = id;
    },
    // 保存
    save() {
      var that = this;
      if (this.selection.length > 0) {
        that.loading = true;
        that.SiSTKWEventsManagementUpdateCompetitionClerkOfCourseInput.competitionId = this.$route.params.id;
        that.SiSTKWEventsManagementUpdateCompetitionClerkOfCourseInput.clerkOfCourseRepositoryIds = this.selection;
        api_POST_EventsManagementClerkOfCourseCompetitionClerkOfCourse(that.SiSTKWEventsManagementUpdateCompetitionClerkOfCourseInput).then(res => {
          that.loading = false;
          that.dialogVisible = false;
          that.Api_GET_EventsManagementClerkOfCourseClerkOfCourseDepositoryListQO.NameOrMobile = '';
          that.$message({
            type: 'success',
            message: '设置成功!'
          });
          that.$parent.getCheckPeople();
        }).catch(() => {
          that.loading = false;
          that.dialogVisible = false;
          that.Api_GET_EventsManagementClerkOfCourseClerkOfCourseDepositoryListQO.NameOrMobile = '';
          that.$message({
            type: 'error',
            message: '设置失败!'
          });
        });
      } else {
        this.$message({
          type: 'warning',
          message: '请先选择检录人员'
        });
      }
    },
    // 分页
    sizeChange: function(MaxResultCount) {
      this.Api_GET_EventsManagementClerkOfCourseClerkOfCourseDepositoryListQO.MaxResultCount = MaxResultCount;
      this.getData();
    },
    pageIndexChange(currentPage) {
      this.getData(currentPage);
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
